vue中控制mock在开发环境使用,在生产环境禁用 | 您所在的位置:网站首页 › vue antd admin编译 › vue中控制mock在开发环境使用,在生产环境禁用 |
文章目录
vue中控制mock在开发环境使用,在生产环境禁用解决方案
vue中控制mock在开发环境使用,在生产环境禁用
原因:mock拦截所有的axios请求,根据请求,做出相应的响应。平时前后端分离开发,我们使用mock获得相应的数据,但当和后端联调的时候,不禁用mock,就无法获得后端数据。 解决方案第一步、我们设置mock在开发development环境可用,在生产production环境不可用。在vue中通过设置main.js中的Vue.config.productionTip来决定模式。默认为false是生产环境。我们将其设置为true即进入了开发环境,设置后,可在浏览器检查中看到You are runing Vue in development mode如下图: 第二步、我们在config/dev.env.js和config/prod.env.js中设置变量。相当于同一个变量名,在不同的模式下,有不同的值。 // dev.env.js下的配置。 module.exports = merge(prodEnv, { NODE_ENV: '"development"', MOCK: true //开发环境使用mock }) // prod.env.js下的配置 module.exports = { NODE_ENV: '"production"', MOCK: false // 生产环境禁用mock }同理,如果有其他在生产环境和开发环境取值不同的同名变量,可以定义在相应的文件中,如在axios请求时,不同环境有不同的baseURL,即可以设置。 第三步、在main.js中设置process.env.MOCK && require("./mock/index.js")。process.env.MOCK这句就是判断刚才设置的值,如果是true,才会执行语句引入mock,如果是false,则后面的语句不执行,即不引入mock。 |
CopyRight 2018-2019 实验室设备网 版权所有 |